<template>
	<view class="tabs" :class="[size]">
		<view v-for="item of list" :key="item.index" class="item" :class="{'flex':itemFlex}"
			@tap.stop="tabSwitch(item)">
			<view class="item__text" :class="{active:current === item.index}">
				{{item.title}}
			</view>
		</view>
	</view>
	<view class="tabs-content">
		<swiper class="swiper" :current="current" @change="tapSwiperChange">
			<!-- 简直是奇葩呀：v-slot:slot0="scope" 这样的话就不得行
			     slot的名称，明明是：slot0 ,但是微信小程序里面 取变成了slot0-0
			-->
			<!-- <swiper-item v-for="item of list" :key="item.index">
				<slot :name="`slot${item.index}`" :show="current === item.index || item.rendered">
				</slot>
			</swiper-item> -->
			<!-- 暂时用这种笨方法解决了 -->
			<swiper-item v-if="list[0]" :key="0" class="swiper-item">
				<slot name="slot0" :show="current === 0 || list[0].rendered"></slot>
			</swiper-item>
			<swiper-item v-if="list[1]" :key="1" class="swiper-item">
				<slot name="slot1" :show="current === 1 || list[1].rendered"></slot>
			</swiper-item>
			<swiper-item v-if="list[2]" :key="2" class="swiper-item">
				<slot name="slot2" :show="current === 2 || list[2].rendered"></slot>
			</swiper-item>
			<swiper-item v-if="list[3]" :key="3" class="swiper-item">
				<slot name="slot3" :show="current === 3 || list[3].rendered"></slot>
			</swiper-item>
			<swiper-item v-if="list[4]" :key="4" class="swiper-item">
				<slot name="slot4" :show="current === 4 || list[4].rendered"></slot>
			</swiper-item>
			<swiper-item v-if="list[5]" :key="5" class="swiper-item">
				<slot name="slot5" :show="current === 5 || list[5].rendered"></slot>
			</swiper-item>
			<swiper-item v-if="list[6]" :key="6" class="swiper-item">
				<slot name="slot6" :show="current === 6 || list[6].rendered"></slot>
			</swiper-item>
			<swiper-item v-if="list[7]" :key="7" class="swiper-item">
				<slot name="slot7" :show="current === 7 || list[7].rendered"></slot>
			</swiper-item>
			<swiper-item v-if="list[8]" :key="8" class="swiper-item">
				<slot name="slot8" :show="current === 8 || list[8].rendered"></slot>
			</swiper-item>
		</swiper>
	</view>
</template>
<script lang="ts">
	import { defineComponent } from "vue"
	export default defineComponent({
		// #ifdef MP-WEIXIN
		options: {
			virtualHost: true,
			styleIsolation: 'shared'
		},
		// #endif
	})
</script>
<script setup lang="ts">
	import { ref, withDefaults, onBeforeMount } from 'vue';
	import type { SwiperOnChangeEvent } from '@uni-helper/uni-app-types';
	export interface Tab { title : string; index : number; }
	export interface InnerTab extends Tab { rendered : boolean; }
	export interface TabsProps {
		current ?: number;
		tabs : Tab[];
		size ?: 'normal' | 'large';
		itemFlex ?: boolean;
	}

	const emit = defineEmits<{ 'update:current' : [currentIndex: number] }>();

	const props = withDefaults(defineProps<TabsProps>(), {
		current: 0,
		tabs: () => ([])
	});

	const list = ref<InnerTab[]>([]);
	const current = ref<number>(0);

	onBeforeMount(() => {
		for (const item of props.tabs) {
			list.value.push({ ...item, rendered: false })
		}
		const tab = list.value[props.current];
		if (tab) {
			current.value = tab.index;
			tab.rendered = true;
		}
	});

	function tabSwitch(item : InnerTab) {
		current.value = item.index;
		item.rendered = true;
		emit('update:current', item.index);
	}

	function tapSwiperChange(event : SwiperOnChangeEvent) {
		const currentIndex = event.detail.current;
		current.value = currentIndex;
		const findItem = list.value.find(item => item.index === currentIndex);
		if (findItem) {
			findItem.rendered = true;
		}
		emit('update:current', currentIndex);
	}
</script>

<style scoped lang="scss">
	.tabs {
		display: inline-flex;
		justify-content: space-between;
		width: 100vw;
		height: 116rpx;
		padding: 30rpx 16rpx 28rpx 16rpx;
		box-sizing: border-box;
		// background-color: white;
		font-size: 32rpx;
		color: #4F4F4F;

		.item {
			position: relative;
			display: inline-flex;
			height: 100%;
			justify-content: center;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;


			&.flex {
				flex: 1;
			}

			&__text {
				position: relative;
				display: inline-flex;
				align-items: center;
				height: 100%;

				&.active {
					font-weight: bold;
					color: #101010;

					&::after {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: 1px;
						display: inline-block;
						width: 40rpx;
						height: 3rpx;
						content: ' ';
						background-color: $uni-primary;
						border-radius: 3rpx;
					}
				}
			}
		}

		&.large {
			height: 88rpx;
			font-size: 32rpx;
		}
	}

	.tabs-content {
		display: flex;
		flex: 1;
		height: 100%;
		box-sizing: border-box;
		flex-direction: column;
	}

	.swiper {
		position: relative;
		flex: 1;
		box-sizing: border-box;
		// background-color: white;
	}

	.swiper-item {
		:deep(> view) {
			height: 100%;
		}
	}
</style>